<template>
  <div class="seeorder">
    <div class="top">
      <div class="status">{{order.status}}</div>
      <div class="order">订单号：{{order.order_id}}</div>
    </div>
    <div class="center">
      <div class="kuaidi">{{order.express_title}}</div>
      <div class="order" v-if="num != '' ">快递单号：{{num}}</div>
      <div class="order">快递电话：{{order.express_telphone}}</div>
    </div>
    <div class="progress">

      <section class="editor selected" v-for="item in order.express_info">
        <section class="pro1">
          <section class="pro2"></section>
          <section class="pro3">
            <section class="pro4">
              <section class="pro5">
                <p class="pro6">
                  <span class="pro7">{{item.date_added}}<br/>{{item.title}}</span>
                </p>
              </section>
            </section>
          </section>
        </section>
      </section>

      <section class="editor selected" v-for="it in order.express_route">
        <section class="pro1">
          <section class="pro2"></section>
          <section class="pro3">
            <section class="pro4">
              <section class="pro5">
                <p class="pro6">
                  <span class="pro7">{{it.acceptTime}}<br/>[{{it.acceptAddress}}]<i v-html="it.remark"></i></span>
                </p>
              </section>
            </section>
          </section>
        </section>
      </section>

      <!--<section class="editor selected">-->
        <!--<section class="pro1">-->
          <!--<section class="pro2"></section>-->
          <!--<section class="pro3">-->
            <!--<section class="pro4">-->
              <!--<section class="pro5">-->
                <!--<p class="pro6">-->
                  <!--<span class="pro7">2017-01-12 21：02 <br/>您的订单已经出库</span>-->
                <!--</p>-->
              <!--</section>-->
            <!--</section>-->
          <!--</section>-->
        <!--</section>-->
      <!--</section>-->

      <!--<section class="editor selected">-->
        <!--<section class="pro1">-->
          <!--<section class="pro2"></section>-->
          <!--<section class="pro3">-->
            <!--<section class="pro4">-->
              <!--<section class="pro5">-->
                <!--<p class="pro6">-->
                  <!--<span class="pro7">2017-01-12 21：02 <br/>您的订单已经出库</span>-->
                <!--</p>-->
              <!--</section>-->
            <!--</section>-->
          <!--</section>-->
        <!--</section>-->
      <!--</section>-->


    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui' ;

  export default {
    name: 'paySuccess',
    data () {
      return {
        order:{},
        num:''
      }
    },
    methods: {
      redirect:function(url){
        this.$router.push(url);
      },
      initData:function(){
        var ajaxData = {};
        var _this = this ;
        ajaxData.order_id = this.$route.query.id ;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';

//        2017090414233112070514
//        console.log(this.$route.query.id)
        $.ajax({
          type:'post',
          url:RouteMap.getOrderInformation,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){
              console.log(res.data.express_route);
              _this.order=res.data;
              if(res.data.express_route.length>0){
                _this.num = res.data.express_route[0].mailNo;

              }

            }
            else{
              //Toast(res.msg)
            }
          }
        })

      }
    },
    mounted:function(){
        this.initData();
    },
    components: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .seeorder{
    background: #f2f2f2;
    font-size: .5rem;
  }
  .top,.center,.progress{
    background: #fff;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
  }
  .status{
    color: #b63437;
    font-weight: bold;
    font-size: .7rem;
    padding-bottom: .2rem;
  }
  .kuaidi{
    color: #333;
    font-weight: bold;
    font-size: .7rem;
    padding-bottom: .2rem;

  }
  .order{
    font-size: .5rem;
    line-height: .7rem;
  }

.pro1{
  border: 0px none; padding: 0px;
}
.pro2{
  width:1.2em; height:1.2em; border-radius: 100%;background-color: #ff7b81;display:inline-block;margin-top:1em;vertical-align: top;
  position: relative; z-index: 111;
}
.pro3{
  display: inline-block;width: 78%;border-left-width: 1px; border-left-style: solid; border-color: #f0f0f0;margin-left:-0.92em;
}
.pro4{
  margin-top:.1rem; color: inherit;display:inline-block;width: 100%;  padding-left: 15px;
}
.pro5{
   color: rgb(191, 191, 191);padding:.4rem 0px;display: inline-block;width:75%;
}
.pro6{
  color: rgb(190, 119, 99);
  text-align: left;
  width:11rem;
  line-height: .8rem; border-color: rgb(190, 119, 99);
}
.pro7{
  color:#7F7F7F;
  font-size:.6rem;
}

</style>

